<template>
  <div class="con">
    <nav-bar :title="title"></nav-bar>
    <div class="appeal-main">
      <h2 class="title">诉求详情:</h2>

      <van-form @submit="onSubmit">
        <van-field
          required
          v-model="formParams.name"
          name="诉求人姓名"
          label="诉求人姓名"
          placeholder="诉求人姓名"
          disabled
          :rules="[{ required: true, message: '请填写诉求人姓名' }]"
        />

        <van-field
          required
          readonly
          name="sexName"
          v-model="formParams.sexName"
          label="性别"
          placeholder="点击选择性别"
          disabled
        />
        <van-field v-model="formParams.age" type="number" name="年龄" label="年龄" placeholder="年龄" disabled />

        <van-field
          required
          v-model="formParams.phone"
          type="number"
          name="联系方式"
          label="联系方式"
          placeholder="联系方式"
          disabled
          :rules="[{ required: true, message: '请填写联系方式' }]"
        />

        <van-field
          required
          disabled
          v-model="formParams.address"
          type="string"
          name="住址"
          label="住址"
          placeholder="住址"
          :rules="[{ required: true, message: '请填写住址' }]"
        />

        <van-field
          required
          disabled
          v-model="formParams.detailInfo"
          rows="5"
          autosize
          label="详情"
          type="textarea"
          placeholder="请输入详情"
          :rules="[{ required: true, message: '请填写详情' }]"
        />

        <van-field required disabled v-model="formParams.submitTime" rows="5" autosize label="提交时间" />

        <van-field
          required
          readonly
          clickable
          disabled
          name="buttonName"
          v-model="formParams.buttonName"
          label="操作"
          right-icon="arrow"
          placeholder="点击选择操作"
          @click="dictOpenPopup('button')"
        />

        <van-field
          v-model="formParams.replyContent"
          rows="5"
          autosize
          label="回复"
          type="textarea"
          placeholder="请输入回复"
        />

        <template v-if="formParams.buttonName === '受理'">
          <van-field required disabled v-model="stateTime" rows="5" autosize label="受理时间" />
          <!-- <van-field
            required
            v-model="formParams.finishTime"
            rows="5"
            autosize
            label="完成时间"
            placeholder="请输入时间"
          /> -->
          <van-field
            readonly
            clickable
            name="finishTime"
            v-model="formParams.finishTime"
            label="完成时间"
            placeholder="请选择"
            @click="dateOpenPopup('finishTime')"
          />
          <van-field required disabled v-model="formParams.stateUserName" rows="5" autosize label="受理人" />
        </template>

        <template v-if="formParams.buttonName === '退回/驳回'">
          <van-field required disabled type="text" v-model="stateTime" rows="5" autosize label="驳回时间" />
          <van-field v-model="formParams.rejectInfo" rows="5" autosize label="驳回理由" type="textarea" />
          <van-field required disabled v-model="formParams.stateUserName" rows="5" autosize label="驳回人" />
        </template>

        <div class="btn">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
      <!-- 字典项 -->
      <van-popup v-model="dictPopupShow" round position="bottom" @close="dictValue = ''">
        <van-picker
          :readonly="dis"
          show-toolbar
          :default-index="dictData[dictType] && dictData[dictType].findIndex(o => o.code === dictValue)"
          :columns="dictData[dictType]"
          value-key="description"
          @cancel="dictPopupShow = false"
          @confirm="dictOnConfirm"
        />
      </van-popup>
      <van-popup v-model="datePopupShow" round position="bottom" @close="date = new Date()">
        <van-datetime-picker
          v-model="date"
          type="date"
          title="选择年月日"
          @cancel="datePopupShow = false"
          @confirm="dateOnConfirm"
        />
      </van-popup>
      <van-popup v-model="show" closeable close-icon="close" position="bottom" class="pop">提交成功</van-popup>
    </div>
  </div>
</template>

<script>
import propertyManagement from '@/api/propertyManagement'
import { formParams } from '../libs/data'
import SelectPopup from '@/mixins/selectPopup'
export default {
  mixins: [SelectPopup],
  data() {
    return {
      title: '诉求服务',
      value: '',
      showPicker: false,
      formParams: { ...formParams },
      columns: ['男', '女'],
      show: false,
      dictTypes: 'button',
      checked: true,
      arr: [],
      changeDatas: [],
      local: [],
      dis: false,
      stateTime: ''
    }
  },
  created() {
    // 字典项
    this.getDict(this.dictTypes)
    this.local = JSON.parse(window.localStorage.getItem('userInfo')).userName
  },
  mounted() {
    console.log('state------>', this.$store.state.appealInfo)
    this.formParams = this.$store.state.appealInfo
    if (this.formParams.stateTime) {
      this.stateTime = this.formParams.stateTime
    }
    // this.formParams.buttonName = this.formParams.state
    if (this.formParams.state === 30) {
      this.formParams.buttonName = '退回/驳回'
    } else if (this.formParams.state === 40) {
      this.formParams.buttonName = '受理'
    }
    if (this.formParams.state) {
      this.dis = true
      this.dictOnConfirm = false
    }
    console.log('-------------->dictData', this.dictData)
  },
  computed: {
    // ...mapState({
    //   appealInfo: state => state.appealInfo
    // })
  },
  watch: {
    dictData: {
      handler: function (val, oVal) {
        val.button = val.button.filter(e => {
          return e.code === '30' || e.code === '040'
        })
      }
    }
  },
  methods: {
    onSubmit() {
      // return
      // this.formParams.finishTime = new Date()
      // var time=moment(new Date()).format(YYYY-MM-DD hh:mm:ss);
      this.formParams.stateTime = new Date()
      console.log(this.formParams.stateTime)

      this.formParams = this.$store.state.appealInfo
      this.formParams.state = this[this.paramsName][this.dictType]
      this.formParams.stateUserName = this.local
      propertyManagement.Grid.update(this.formParams).then(res => {
        if (res.data.status === 0) {
          console.log('修改成功')
          this.show = true
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        } else {
          console.log('修改失败')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.con {
  display: flex;
  flex-direction: column;
}
.appeal-main {
  width: 100%;
  height: 100%;
  .title {
    margin: 100px 0 0 30px;
  }
  .btn {
    z-index: 1;
  }
  .pop {
    font-size: 50px;
    height: 30%;
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.acceptance {
  margin-bottom: 100px;
  .acceptance-title {
    margin-left: 30px;
  }
  .van-switch {
    margin-left: 20px;
  }
}
</style>
